<template>
  <div>
    <div class="good">
      <div class="img">
        <img :src="goodsinfo.thumbnail">
      </div>
      <div class="info">
        <div class="name">{{goodsinfo.title}}</div>
        <div class="sub">
          {{goodsinfo.info}}
        </div>
        <div class="prize">
          <span class="red">
          <prize v-bind:prize="goodsinfo.type[0].prize"></prize>
        </span>
          <span>{{goodsinfo.type[0].unit}}</span>
        </div>
        <div class="ctrl">
          <div class="add plus" @click="addgood1(0)">
            +
          </div>
          <!--{{goodsinfo.type[0].count}}-->
          <input v-show="goodsinfo.type[0].count>0" maxlength="2" v-model="goodsinfo.type[0].count" class="number"/>
          <div v-show="goodsinfo.type[0].count>0" class="add reduce" @click="reducegood1(0)">
            -
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import prize from '../goodinfo/plugs/prize'
  import {Toast} from 'vant';

  export default {
    name: "goods",
    components: {
      prize
    },

    props: {
      goodsinfo: Object,
      type: Number
    },
    methods: {
      addgood1: function (v) {
        console.log(this.goodsinfo.type[v])
        if (this.goodsinfo.type[v].count < this.goodsinfo.type[v].stock) {
          this.goodsinfo.type[v].count++
        } else {
          Toast('库存不足');
        }

      },
      reducegood1: function (v) {
        if (this.goodsinfo.type[v].count > 0) {
          this.goodsinfo.type[v].count--
        }

      },


    }
  }
</script>

<style scoped lang="less">
  @width: 20px;
  .good .ctrl {
    position: absolute;
    height: @width;
    width: @width*3;
    right: 10px;
    bottom: 5px;

  }

  .good2 .ctrl {
    position: absolute;
    height: @width;
    width: @width*3;
    right: 10px;
    bottom: 10px;

  }

  .guige {
    clear: both;
    position: relative;
    height: 40px;
    padding: 0 15px;
    border-top: 1px solid @_lgrey;
    line-height: 40px;
  }

  div {
    box-sizing: border-box;
  }

  .good {
    width: 100%;
    height: 120px;
    padding-top: 15px;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid @_lgrey;

  }

  .good2 {
    width: 100%;
    height: auto;
    padding-top: 15px;
    overflow: hidden;
    background-color: #fff;
    border-bottom: 1px solid @_lgrey;

  }

  .name {
    font-size: 15px;
    color: @_blk;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .img {
    width: 28%;
    height: 80px;
    /*margin-top: 15px;*/
    padding: 5px;
    line-height: 70px;
    float: left; //'
    margin-left: 2%;
    background-repeat: no-repeat;
    background-position: center;
    /*border: 1px solid #666666;*/
  }

  .img img {
    width: 100%;
  }

  .good-input {
    width: 30px;
    border: 1px solid @_blk;
    text-align: center;
  }

  .info {
    float: left;

    width: 68%;
    margin-left: 2%;
    position: relative;
    height: 95px;
  }

  .sub {
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .prize {
    margin-top: 25px;
  }

  .add {
    position: absolute;
    width: @width;
    height: @width;
    right: 0px;
    color: @_green;
    font-size: 20px;
    border-radius: 50%;
    border: 1px solid @_green;
    text-align: center;
  }

  .plus {
    line-height: @width;
    right: 0px;
  }

  .reduce {
    line-height: 15px;
    right: 40px;
  }

  .number {
    display: inline-block;
    position: absolute;
    /*border: 1px solid ;*/
    width: @width;
    height: @width;
    right: 20px;
    text-align: center;
  }
</style>
